<template>
  <div class="main_box" style="padding: 0 10px 10px 10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">呼叫器{{ dataInfo.equipCode }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info">
          <el-row class="header-info">
            <el-col class="header-img__wrapper">
              <div>
                <img title="点击下载图片" @click="downloadByBlob(dataInfo.wxAppUrl, '呼叫器用户码')" :src="dataInfo.wxAppUrl" width="170px" style="cursor: pointer" />
                <div class="title" style="width: 170px">{{ dataInfo.equipCode }}</div>
              </div>
            </el-col>
            <el-col class="text-info">
              <el-col>
                <el-col>呼叫器名称:</el-col>
                <el-col>{{ dataInfo.equipName }}</el-col>
              </el-col>
              <el-col>
                <el-col>呼叫器类型:</el-col>
                <el-col>{{ formatBeeperType(dataInfo.beeperType) }} - {{ $Filters.formatBeeperVersion(dataInfo.beeperVersion) }}</el-col>
              </el-col>
              <el-col>
                <el-col>联系人:</el-col>
                <el-col>{{ dataInfo.linkName }}</el-col>
              </el-col>
              <el-col>
                <el-col>联系电话:</el-col>
                <el-col>{{ dataInfo.phone }}</el-col>
              </el-col>
              <el-col>
                <el-col>在线状态:</el-col>
                <el-col>
                  <!--<el-tag size="mini" effect="dark" :type="formatBeeperStates(dataInfo.equipState)">
                    {{ formatBeeperState(dataInfo.equipState) }}
                  </el-tag>-->
                  <span v-if="dataInfo.beeperVersion !== 1">
                    <el-tag size="mini" effect="dark" :type="formatBeeperStates(dataInfo.equipState)">
                      {{ formatBeeperState(dataInfo.equipState) }}
                    </el-tag>
                  </span>
                  <span v-if="dataInfo.beeperVersion === 1">
                    <el-tag size="mini" effect="dark" :type="dataInfo.equipState === 1 ? '' : 'success'">
                      {{ dataInfo.equipState === 1 ? '未激活' : '在线' }}
                    </el-tag>
                  </span>
                </el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="body-card">
      <el-tabs v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane label="基本信息" name="first">
          <el-row class="info-module">
            <el-col class="title"> 核心信息 </el-col>
            <el-col class="content">
              <el-row>
                <el-col> 余额: </el-col>
                <el-col>
                  {{ dataInfo.balance }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 设备电话号: </el-col>
                <el-col>
                  {{ dataInfo.equipPhone }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> MAC地址: </el-col>
                <el-col>
                  {{ dataInfo.equipMac }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 卡ICCID: </el-col>
                <el-col> {{ dataInfo.iccid }} <el-button v-if="dataInfo.iccid" type="danger" size="mini" class="tag-copy" :data-clipboard-text="dataInfo.iccid" @click="handleCopy()">复制</el-button> </el-col>
              </el-row>
              <el-row>
                <el-col> 呼叫器分类: </el-col>
                <el-col>
                  {{ dataInfo.classifyName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 呼叫器内容显示: </el-col>
                <el-col>
                  {{ dataInfo.showLevel === 0 ? '全部' : dataInfo.showLevel === 1 ? '仅精选' : '仅全部' }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> wifi账号/密码: </el-col>
                <el-col>
                  <div v-if="(dataInfo.wifiName == null && dataInfo.wifiPwd == null) || (!dataInfo.wifiName && !dataInfo.wifiPwd)"></div>
                  <div v-else>{{ dataInfo.wifiName + '/' + dataInfo.wifiPwd }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col> 按钮一行数: </el-col>
                <el-col>
                  {{ dataInfo.btnLineNum }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 支持语音下单: </el-col>
                <el-col>
                  {{ dataInfo.btnVoiceFlag ? '是' : '' }}
                </el-col>
              </el-row>

              <el-row>
                <el-col> 必填住户地址: </el-col>
                <el-col>
                  {{ dataInfo.requireAddress ? '是' : '否' }}
                </el-col>
              </el-row>

              <el-row>
                <el-col> 异常状态: </el-col>
                <el-col>
                  <span style="color: red" v-if="dataInfo.errorState === 1">异常警告</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col> 用户标签: </el-col>
                <el-col>
                  {{ tags }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 是否开放搜索: </el-col>
                <el-col>
                  {{ dataInfo.openSearch===1?"是":'否' }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 连网方式: </el-col>
                <el-col>
                  {{ $Filters.formatLinkWay(dataInfo.linkWay) }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="info-module">
            <el-col> 联系信息 </el-col>
            <el-col>
              <!-- <el-row>
                <el-col>
                  联系地址:
                </el-col>
                <el-col>
                  {{ address }}
                </el-col>
              </el-row> -->
              <el-row>
                <el-col> 收货地址设置方式: </el-col>
                <el-col>
                  {{ $Filters.formatAddressType(dataInfo.addressType) }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 收货信息的填写方式: </el-col>
                <el-col>
                  {{ dataInfo.requireAddress === 1 ? '呼叫器绑定时' : '呼叫器下单时' }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 经纬度: </el-col>
                <el-col> {{ dataInfo.longitude }},{{ dataInfo.latitude }} </el-col>
              </el-row>
              <el-row>
                <el-col> 所属小区: </el-col>
                <el-col>
                  {{ dataInfo.villageName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 小区地址: </el-col>
                <el-col>
                  {{ villageAddress }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 门牌号: </el-col>
                <el-col>
                  {{ dataInfo.buildName + dataInfo.unitName + dataInfo.floorName + dataInfo.houseNumber }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 物业联系人: </el-col>
                <el-col>
                  {{ dataInfo.pmcName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 物业联系电话: </el-col>
                <el-col>
                  {{ dataInfo.pmcPhone }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 物业备用联系电话: </el-col>
                <el-col>
                  {{ dataInfo.pmcPhoneTwo }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 备用联系电话: </el-col>
                <el-col>
                  {{ dataInfo.phoneTwo }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="info-module">
            <el-col> 业务信息 </el-col>
            <el-col>
              <el-row>
                <el-col> 业务员: </el-col>
                <el-col>
                  {{ dataInfo.saleUserName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 送检方: </el-col>
                <el-col>
                  {{ dataInfo.sourceName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 创建人: </el-col>
                <el-col>
                  {{ dataInfo.createUserName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 修改人: </el-col>
                <el-col>
                  {{ dataInfo.modifyUserName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 修改时间: </el-col>
                <el-col>
                  {{ dataInfo.modifyDate }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 备注: </el-col>
                <el-col>
                  {{ dataInfo.remark }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row type="flex">
            <div style="width: fit-content; text-align: center; margin-right: 100px">
              <img title="点击下载图片" @click="downloadByBlob(dataInfo.businessWxAppUrl, '专属商户注册码')" :src="dataInfo.businessWxAppUrl" width="200" height="200" style="cursor: pointer" />
              <div style="margin-top: 5px">{{ dataInfo.equipCode }}专属码</div>
            </div>
            <div style="width: fit-content; text-align: center; margin-right: 100px">
              <img title="点击下载图片" @click="downloadByBlob(dataInfo.payWxAppUrl, '呼叫器支付码')" :src="dataInfo.payWxAppUrl" width="200" height="200" style="cursor: pointer" />
              <div style="margin-top: 5px">{{ dataInfo.equipCode }}支付码</div>
            </div>
            <div style="width: fit-content; text-align: center">
              <el-image v-if="dataInfo.siteUrl" style="width: 200px; height: 200px" :src="dataInfo.siteUrl || ''" fit="contain" :preview-src-list="[dataInfo.siteUrl]"> </el-image>
              <div style="margin-top: 5px">地图图片</div>
            </div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="服务信息" name="second">
          <div style="margin-bottom: 5px">
            <span>服务模板名称：{{ dataInfo.modelName }}</span>
            <el-button plain size="mini" type="primary" @click.native="handleViewModelInfo"> 查看 </el-button>
          </div>
          <div style="margin-bottom: 15px">
            <span>推广模板名称：{{ dataInfo.promoteModelName }}</span>
            <el-button plain size="mini" type="primary" @click.native="handlePromoteModelInfo"> 查看 </el-button>
          </div>
          <el-table style="width: fit-content" :data="tableData" border highlight-current-row :header-row-style="{ 'background-color': '#f2f2f2' }">
            <el-table-column prop="btnCode" label="功能键编号" width="60px" align="center" />
            <el-table-column prop="btnName" label="服务功能键" width="100" align="center" />
            <el-table-column label="自定义功能键图片" width="160" align="center">
              <template slot-scope="scope">
                <el-image v-if="scope.row.customImage" style="width: 100px; height: 100px" fit="cover" :src="scope.row.customImage" :preview.src-list="[scope.row.customImage]"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="自定义功能键名称" prop="customName" align="center" width="130"></el-table-column>
            <el-table-column label="功能键描述" prop="describes" width="220" align="center"> </el-table-column>
            <el-table-column label="按键归类" width="220" align="center">
              <template slot-scope="scope">
                <span>{{ formatBtnMRelationList(scope.row) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="relationType" label="关联类型" width="170" align="center">
              <template slot-scope="scope">
                <span>{{ formatRelationType(scope.row.relationType) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="typeVal" label="事件类型" width="220" align="center">
              <template slot-scope="scope">
                <div>
                  {{ $Filters.formatEvent(scope.row.eventId) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="关联内容" width="220" align="center">
              <template slot-scope="{ row }">
                {{ row.eventId === 7 ? formatLinkUrl(row) : row.linkUrl }}
              </template>
            </el-table-column>
            <el-table-column prop="classifyName" label="服务分类" width="170px" align="center"> </el-table-column>
            <el-table-column prop="businessName" label="商户" width="220px" align="center"> </el-table-column>
            <el-table-column prop="limitType" label="仅会员购买" width="170" align="center">
              <template slot-scope="{ row }">
                {{ row.limitType === 1 ? '是' : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="voiceOrderFlag" width="100" label="支持语音支付">
              <template slot-scope="{ row }">
                {{ row.voiceOrderFlag === 1 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column prop="serverTimeRange" width="200" label="服务时间范围">
              <template slot-scope="{ row }">
                <span>{{ row.serverTimeRange && row.serverTimeRange.replace(',', '-') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="parentBtnCode" label="合并功能键编号" width="130" align="center"></el-table-column>
            <el-table-column label="操作" width="130px" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button v-if="scope.row.relationType === 1" plain type="mini" @click.native="handleSearchMore(scope.row)">查看详细服务</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="安全设备" name="third">
          <el-button style="margin-bottom: 15px" size="mini" type="primary" plain icon="fa fa-chain" @click="handleSafetyEquip"> 绑定安全设备 </el-button>
          <el-button type="danger" plain icon="fa fa-unlink" @click="handleUnbinding" size="mini"> 批量解绑 </el-button>
          <el-table style="width: fit-content" :data="safeEquipList" border highlight-current-row :header-row-style="{ 'background-color': '#f2f2f2' }" @selection-change="handleSelectionChange">
            <el-table-column type="selection"> </el-table-column>
            <el-table-column label="序号" width="140px" align="center" type="index"> </el-table-column>
            <el-table-column prop="name" label="设备名称" width="160px" align="center"> </el-table-column>
            <el-table-column prop="" label="类型" width="170" align="center">
              <template slot-scope="scope">
                <div>
                  {{ formatSafetyType(scope.row.type) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="编号" width="230px" align="center"> </el-table-column>
            <el-table-column label="在线状态" lign="center" width="100" align="center">
              <template slot-scope="scope">
                <span>
                  <el-tag size="mini" effect="dark" :type="formatEquipStates(scope.row.state)">
                    {{ formatEquipState(scope.row.state) }}
                  </el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="报警状态" width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.errorState === 0" size="mini" effect="dark" type="success"> 正常 </el-tag>
                <el-tag v-if="scope.row.errorState === 1" size="mini" effect="dark" type="danger"> 报警 </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="月结支付绑定" name="fourth">
          <el-table style="width: fit-content" :data="businessList" border highlight-current-row :header-row-style="{ 'background-color': '#f2f2f2' }">
            <el-table-column label="序号" width="140px" align="center" type="index"> </el-table-column>
            <el-table-column align="center" width="200px" label="商户名称" prop="businessName"> </el-table-column>
            <el-table-column align="center" width="200px" label="商户简称" prop="businessShortName"> </el-table-column>

            <el-table-column align="center" width="140px" label="商户类型">
              <template slot-scope="scope">
                <span>
                  <el-tag size="mini" effect="dark" :type="formatBusinessTypes(scope.row.businessType)">
                    {{ formatBusinessType(scope.row.businessType) }}
                  </el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160px" align="center">
              <template slot-scope="scope">
                <el-button type="danger" plain size="mini" @click="handleDelBusiness(scope.row)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="海报" name="fifth" v-if="dataInfo.posterUrl">
          <!-- <el-image title="点击下载海报" :src="dataInfo.posterUrl" @click="handleDownPoster" style="width:1000px;cursor:pointer">

          </el-image> -->
          <!-- html文本嵌入标签 -->
          <embed title="点击下载海报" :src="dataInfo.posterUrl" @click="handleDownPoster" style="width: 1000px; height: 1000px; cursor: pointer" />
          <!-- <embed src="helloworld.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="81 /> -->
        </el-tab-pane>

        <el-tab-pane label="设备信息" name="sixth" v-if="dataInfo.beeperVersion > 3">
          <el-row class="info-module">
            <el-col class="content">
              <el-row>
                <el-col> 设备ID： </el-col>
                <el-col>
                  {{ dataInfo.equipMac }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 设备版本： </el-col>
                <el-col> {{ dataInfo.hardware }} - {{ dataInfo.software }} </el-col>
              </el-row>
              <el-row>
                <el-col> 电量： </el-col>
                <el-col>
                  {{ dataInfo.powerLevel === 1 ? '满电' : dataInfo.powerLevel === 2 ? '半电' : '电量不足' }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 语音识别解析： </el-col>
                <el-col>
                  {{ asrFilter(dataInfo.asrSwitch) }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 常用联系人： </el-col>
                <el-col>
                  {{ dataInfo.linkNames }}
                  {{ dataInfo.linkPhones }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 紧急联系人： </el-col>
                <el-col>
                  {{ dataInfo.fastPhones }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 识别救命后的操作方式： </el-col>
                <el-col>
                  {{ dataInfo.helpFlag===1?'发送10秒录音':'拨打客服电话' }}
                </el-col>
              </el-row>
              <el-row>
                <el-col> 配置信息： </el-col>
                <el-col>
                  {{ dataInfo.configData }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="心跳记录" name="heartBeat" v-if="dataInfo.beeperVersion > 3">
          <heartbearRecord :typeName="activeName" :equipId="dataInfo.equipId"></heartbearRecord>
        </el-tab-pane>
        <el-tab-pane label="报警记录" name="alarm" v-if="dataInfo.beeperVersion > 3">
          <alarmRecord
            :typeName="activeName"
            :equipId="dataInfo.equipId"
          ></alarmRecord>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- </div> -->

    <server-select ref="ServerSelect" :editOrAdd="false"></server-select>
    <bind-safety-equip :show="showSafetyEquip" :beeperId="beeperId" @updateSafetyEquip="listSafetyEquip"></bind-safety-equip>
  </div>
</template>

<script>
import BeeperApi from '@/api/equip/beeper';
import ServerSelect from '@/components/ServerSelect';
import SafetyApi from '@/api/equip/safety';
import bindSafetyEquip from '@/components/bindSafetyEquip';
import BtnModelApi from '@/api/operation/btnModel';
import heartbearRecord from '@/components/HeartbeatRecord.vue';
import alarmRecord from "@/components/AlarmRecord.vue";
export default {
  data() {
    return {
      beeperId: '',
      dataInfo: {},
      tableData: [],
      safeEquipList: [],
      tags: '',
      activeName: 'first',
      showSafetyEquip: false,
      selectedIds: [],
      businessList: [],
      btnModelRelations: [],
    };
  },
  computed: {
    address() {
      // let streetName = this.dataInfo.streetName?this.dataInfo.streetName:""
      // let address = this.dataInfo.address?this.dataInfo.address:""
      return `${this.dataInfo.provinceName}${this.dataInfo.cityName}${this.dataInfo.areaName}${this.dataInfo.streetName ? this.dataInfo.streetName : ''}
      ${this.dataInfo.villageName ? this.dataInfo.villageName : ''}${this.dataInfo.houseNumber ? this.dataInfo.houseNumber : ''}`;
    },
    villageAddress() {
      return `${this.dataInfo.provinceName}${this.dataInfo.cityName}${this.dataInfo.areaName}${this.dataInfo.streetName ? this.dataInfo.streetName : ''}`;
    },
  },
  components: {
    ServerSelect,
    bindSafetyEquip,
    heartbearRecord,
    alarmRecord
  },
  async mounted() {
    if (this.$route.query.id) {
      this.beeperId = this.$route.query.id;
      await this.getData();
      this.getBtnModelList();
    }
  },
  methods: {
    async getData() {
      const res = await BeeperApi.getBeeperInfo({ id: this.beeperId });
      this.dataInfo = res.data;
      this.tableData = res.data.beeperBtnList || [];
      this.tableData.forEach((item) => {
        item.businessName = item.businessList && item.businessList.map((item) => item.name).join(',');
        item.classifyName = item.classifyName && item.classifyList.map((item) => item.name).join(',');
      });

      res.data.tags.forEach((item, index) => {
        index == 0 ? (this.tags = item.tagName) : (this.tags = this.tags + ',' + item.tagName);
      });
    },
    formatBtnMRelationList(row) {
      const { moduleCode, formatCode } = row;
      let name = '';
      this.btnModelRelations.find((item, index) => {
        if (item.moduleCode == moduleCode) {
          return (name = `${this.$Filters.formatModuleType(item.moduleType)}模块`);
        }
        if (item.btnFormats && item.btnFormats.length) {
          item.btnFormats.find((item2) => {
            if (item2.formatCode == formatCode) {
              return (name = name + `${item2.row}行${item2.col}列`);
            }
          });
        }
      });
      return name;
    },
    formatLinkUrl({ eventId, linkUrl, floorList }) {
      if (eventId == 7 && linkUrl) {
        return floorList.map((item) => item.name).join(',');
      }
      return '';
    },
    // 获取按键样式模板列表
    async getBtnModelList() {
      const { data } = await BtnModelApi.btnModelList();
      this.btnModelRelations = (data || []).find((item) => item.modelId == this.dataInfo.btnModelId)?.btnModelRelations;
    },
    listSafetyEquip() {
      SafetyApi.listSafetyEquip({ beeperId: this.beeperId }).then((res) => {
        this.safeEquipList = res.data;
      });
    },
    listBeeperSettle() {
      BeeperApi.listBeeperSettle({ beeperId: this.beeperId }).then((res) => {
        this.businessList = res.data;
      });
    },
    handleDelBusiness(row) {
      console.log(row);
      const params = {
        id: row.beeperSettleId,
        state: -1,
      };
      this.$confirm('确认删除？', '提示', {
        type: 'warning',
      }).then(() => {
        BeeperApi.deleteBeeperSettle(params).then(() => {
          this.listBeeperSettle();
          this.$Utils.notifySuccess('删除成功');
        });
      });
    },
    handleDownPoster() {
      this.$Utils.downFileByUrl(this.dataInfo.posterUrl, 'poster');
    },
    handleCopy(text) {
      let clipboard = new this.clipboard('.tag-copy');
      clipboard.on('success', (e) => {
        this.$message({
          message: '复制链接成功!',
          type: 'success',
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message({
          message: '复制链接失败!',
          type: 'error',
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
    },
    download(href, name) {
      let eleLink = document.createElement('a');
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },
    downloadByBlob(url, name) {
      let image = new Image();
      image.setAttribute('crossOrigin', 'anonymous');
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },
    formatRelationType(cell) {
      if (cell == 1) {
        return '产品';
      } else if (cell == 2) {
        return 'H5链接';
      } else if (cell == 3) {
        return '小程序链接';
      } else if (cell == 4) {
        return '点击事件';
      } else if (cell == 5) {
        return '小程序内部页面';
      }
    },
    formatBusinessType(cellValue) {
      if (cellValue === 1) {
        return '大众';
      } else if (cellValue === 2) {
        return '专属';
      } else if (cellValue === 3) {
        return '平台';
      }
    },
    formatBusinessTypes(cellValue) {
      if (cellValue === 1) {
        return '';
      } else if (cellValue === 2) {
        return 'danger';
      } else if (cellValue === 3) {
        return 'success';
      }
    },
    formatBeeperState(cellValue) {
      if (cellValue === 0) {
        return '未开通';
      } else if (cellValue === 1) {
        return '未激活';
      } else if (cellValue === 2) {
        return '在线';
      } else if (cellValue === 3) {
        return '离线';
      }
    },
    formatBeeperStates(cellValue) {
      if (cellValue === 0) {
        return 'danger';
      } else if (cellValue === 1) {
        return '';
      } else if (cellValue === 2) {
        return 'success';
      } else if (cellValue === 3) {
        return 'info';
      }
    },
    formatBeeperType(cellValue) {
      if (cellValue === 1) {
        return '公共';
      } else if (cellValue === 2) {
        return '专属';
      }
    },
    // 呼叫器版本（1.虚拟版 2.基础版 3.智能版 4.触屏版 ）
    formatSafetyType(cellValue) {
      if (cellValue === 2) {
        return '接收器';
      } else if (cellValue === 3) {
        return '烟雾报警器';
      } else if (cellValue === 4) {
        return '燃气报警器';
      } else if (cellValue === 5) {
        return '门磁报警器';
      } else if (cellValue === 6) {
        return '水浸卫士';
      } else if (cellValue === 7) {
        return '摄像头';
      } else if (cellValue === 8) {
        return 'SOS报警器';
      } else if (cellValue === 9) {
        return '跌倒报警器';
      } else if (cellValue === 10) {
        return '红外报警器';
      }
    },
    formatEquipState(cellValue) {
      if (cellValue === 0) {
        return '未开通';
      } else if (cellValue === 1) {
        return '未激活';
      } else if (cellValue === 2) {
        return '在线';
      } else if (cellValue === 3) {
        return '离线';
      }
    },
    formatEquipStates(cellValue) {
      if (cellValue === 0) {
        return 'danger';
      } else if (cellValue === 1) {
        return '';
      } else if (cellValue === 2) {
        return 'success';
      } else if (cellValue === 3) {
        return 'info';
      }
    },
    handleViewModelInfo() {
      let _this = this;
      _this.$router.push({
        path: '/server/serverTemplateDetail',
        query: { id: _this.dataInfo.serverModelId },
      });
    },
    asrFilter(val) {
      const [status, set1, set2, set3] = val.split('').map(Number);
      // 根据解析结果生成说明
      const statusMsg = status === 0 ? '关闭' : '开启';
      const set1Msg = set1 === 0 ? '' : '小康小康';
      const set2Msg = set2 === 0 ? '' : '我要打电话';
      const set3Msg = set3 === 0 ? '' : '救命';
      // 拼接结果
      const result = `${statusMsg},${set1Msg},${set2Msg},${set3Msg}`;
      return result;
    },
    handlePromoteModelInfo() {
      let _this = this;
      _this.$router.push({
        path: '/operation/promoteModelDetail',
        query: { id: _this.dataInfo.promoteModelId },
      });
    },
    handleSearchMore(row) {
      this.$refs.ServerSelect.showDialog(row.btnGoodsParams);
    },
    handleSelectionChange(val) {
      this.selectedIds = val.map((item) => item.id);
    },
    handleSafetyEquip() {
      this.showSafetyEquip = true;
    },
    handleUnbinding() {
      if (this.selectedIds.length == 0) {
        this.$message({
          type: 'warning',
          message: '请至少选择一项',
        });
        return;
      }
      this.$confirm('确定解绑安全设备吗？', '提示', {}).then((res) => {
        let params = {
          safetyEquipIds: this.selectedIds,
        };
        SafetyApi.safetyBatchUnBinding(params).then((res) => {
          this.$Utils.notifySuccess();
          this.listSafetyEquip();
        });
      });
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/equip/beeperManagement' });
    },
    tabsClick(tab, event) {
      this.activeName = tab.name;
      if (tab.name == 'third') {
        this.listSafetyEquip();
      }
      if (tab.name == 'fourth') {
        this.listBeeperSettle();
      }
    },
  },
};
</script>
<style lang="scss">
@import '@/assets/css/views/content.scss';
</style>
<style lang="scss" src="@/assets/css/views/detailType.scss"></style>
